<!DOCTYPE html>
<html>
<head>
    <title>{{\app\Helpers\sys('website_title')}}</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }

        [v-cloak] {
            display: none;
        }

        .top-title {
            font-size: 20px;
            text-align: center;
            padding: 15px 0 5px;
        }

        .tips {
            text-align: center;
            color: #999;
            font-size: 12px;
        }

        a {
            color: #5db9f8;
            text-decoration: none;
            margin: 0;
            padding: 0;
            vertical-align: baseline;
            background: transparent;
            outline: none;
        }

        .cx-wrap {
            margin: 0 10px;
        }

        .list-detail {
            display: block;
            max-width: 600px;
            text-align: left;
            background-color: #fff;
            padding: 0 10px;
            -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
            margin: 15px auto;
        }

        .list-detail dd {
            line-height: 2;
            border-bottom: 1px solid #f4f4f4;
            padding: 5px 0;
            overflow: hidden;
        }

        .weui_bar_item_on {
            color: #228a3a !important;
            font-weight: bold;
            background-color: #f1f1f1 !important;
        }

        .list-detail dd .title {
            float: left;
        }

        .list-detail dd .text {
            margin-left: 110px;
            padding: 3px 0;
            line-height: 1.5;
            word-break: break-all;
            text-align: left;
        }

        .gui-icon {
            display: inline-block;
            vertical-align: middle;
            background-repeat: no-repeat;
            background-image: url("");
            width: 18px;
            height: 18px;
        }

        .icon-cppcm {
            background-position: -168px -179px;
        }

        .icon-sl {
            background-position: 0px -207px;
        }

        .icon-cplb {
            background-position: -112px -179px;
        }

        .icon-zjqk {
            background-position: -84px -207px;
        }

        .icon-ztmc {
            background-position: -140px -207px;
        }

        .icon-ztdz {
            background-position: -112px -207px;
        }

        .icon-frxm {
            background-position: -215px -28px;
        }

        .icon-lxfs {
            background-position: -215px -112px;
        }

        .icon-ztsfm {
            background-position: -168px -207px;
        }

        .list-detail dd .gui-icon {
            margin-right: 5px;
        }

        .gui-popup {
            font-size: 14px;
        }

        .gui-popup .popup-header {
            background-color: #f6fff9;
            border-bottom: 1px solid #ebf6f4;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
        }

        .gui-popup .popup-header h2 {
            font-size: 16px;
            color: #228a3a;
            font-weight: 400;
            line-height: 50px;
            padding: 0 15px;
        }

        .gui-section.section-table {
            padding: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
            background: none;
            margin: 0;
        }

        .list-media {
            background: none;
            margin-left: -20px;
        }

        .gui-list {
            margin: 0 auto;
            background: #ffffff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        li {
            list-style: none;
        }

        .list-media li {
            width: 20%;
            padding: 0 0 0 20px;
            float: left;
            margin-bottom: 15px;
            position: relative;
        }

        .gui-list > li, .gui-list > dt, .gui-list > dd, .gui-list .list-item {
            padding: 5px 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .gui-col-1 {
            width: 100% !important;
        }

        .float-left {
            float: left !important;
        }

        .list-media li .desc {
            padding: 10px 5px;
            font-size: 12px;
            line-height: 1.5;
            text-align: center;
            background: #fff;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
        }

        .list-media li .text {
            padding-top: 10px;
            display: inline-block;
            max-width: 80%;
            word-break: break-all;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            vertical-align: middle;
        }

        .gui-popup .popup-footer {
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            background-color: #fbfbfb;
            padding: 15px 10px;
            text-align: center;
            width: 100%;
        }

        .gui-btn, a.gui-btn {
            display: inline-block;
            height: 36px;
            padding: 5px 12px;
            line-height: 18px;
            font-size: 14px;
            color: #FFF;
            text-align: center;
            cursor: pointer;
            vertical-align: middle;
            border: 1px solid #28b84a;
            background-color: #28b84a;
            border-radius: 4px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .gui-popup {
            max-width: 530px;
            border-radius: 2px;
            padding: 0;
            background: #FFF;
            overflow: hidden;
            margin: 5% auto 0;
            position: relative;
        }

        @media screen and (width: 375px) {
            .gui-popup {
                max-width: 270px;
                border-radius: 2px;
                padding: 0;
                background: #FFF;
                overflow: hidden;
                margin: 5% auto 0;
                position: relative;
            }
        }

        .ngdialog-overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
        }

        .alert {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        .jubao {
            padding-left: 30px;
        }

        .jubao div {
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .jubao div span {
            display: inline-block;
            width: 80px;
            font-size: 14px;
            color: #333;
        }

        .jubao div input {
            width: 180px;
            line-height: 30px;
            border-radius: 5px;
            border: 1px solid #f4f4f4;
            padding-left: 10px;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('statics/css/home/weui.min.css')}}">
    <link rel="stylesheet" href="{{ asset('statics/css/home/jquery-weui.min.css')}}">
</head>
<body>
<div id='kecha' v-cloak>
    <h1 class="top-title ng-scope">{{\app\Helpers\sys('website_name')}}</h1>
    <p class="tips ng-scope"><a href="http://jiayingkecha.com">{{\app\Helpers\sys('website_url')}}</a></p>
    <div class="cx-wrap ng-scope">
        <dl class="list-detail">
            <dd>
                <div class="title"><strong>产品信息</strong></div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-cppcm"></span>产品名称：
                </div>
                <div class="text ng-binding" ng-bind="queryInfo.ALIAS">@{{ batch.product.product_name}}</div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-cppcm"></span>通用名称：
                </div>
                <div class="text ng-binding" ng-bind="queryInfo.PRODUCT_NAME">@{{ batch.product.product_name}}</div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-cplb"></span>产品类别：
                </div>
                <div class="text ng-binding" ng-bind="queryInfo.PRODUCT_SORT">@{{ batch.product.variety_name }}</div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-sl"></span><span ng-bind="countTitle" class="ng-binding">收获数量</span>：
                </div>
                <div class="text ng-binding" ng-bind="queryInfo.sldw">@{{ batch.number }}@{{ batch.unit }}</div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-sl"></span><span ng-bind="timeTitle" class="ng-binding">收获时间</span>
                </div>
                <div class="text ng-binding" ng-bind="queryInfo.HARVEST_TIME">@{{ batch.receive_time }}</div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-zjqk"></span>质检情况：
                </div>
                <div class="text">@{{ batch.quality_result == 1 ? '合格' : '不合格' }}</div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-zjqk"></span>认证类型：
                </div>
                <div class="text">@{{ batch.auth_str}}</div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-cppcm"></span>追溯码：
                </div>
                <div class="text ng-binding" ng-bind="queryInfo.TRACE_CODE">@{{ batch.source_code }}</div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-zjqk"></span>扫描次数：
                </div>
                <div class="text">@{{ scan_times }}</div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-cppcm"></span>图片：
                </div>
                <div class="text" id="image" v-for="image in batch.image">
                    <img :src="image.url" :alt="image.file" style='width: 80%;' @click="show_media(1, image.url)">
                </div>
            </dd>
            <dd>
                <div class="title">
                    <span class="gui-icon icon-cppcm"></span>视频：
                </div>
                <div class="text" id="video" v-for="video in batch.video">
                    <video :src="video.url" controls="controls" class="float-left ng-scope"
                           style="width: 80%; max-height: 300px;">
                        你的浏览器不支持视频
                    </video>
                </div>
            </dd>
            <dd class="ng-hide">
                <div class="title">
                    <span class="gui-icon icon-cppcm"></span>操作：
                </div>
                <div v-show='source_code' class="text" id="video">
                        <span class="ng-scope">
                            <a onclick="showAlert(3,true)" style="cursor: pointer" class="ng-binding">举报</a>
                        </span>
                </div>
            </dd>
            <div class="weui_tab">
                <div class="weui_navbar">
                    <a href="#tab1" class="weui_navbar_item weui_bar_item_on">
                        企业信息
                    </a>
                    <a href="#tab2" class="weui_navbar_item">
                        质检结果
                    </a>
                    <a href="#tab3" class="weui_navbar_item">
                        基地信息
                    </a>
                </div>
                <div class="weui_tab_bd">
                    <div id="tab1" class="weui_tab_bd_item weui_tab_bd_item_active">
                        <dd>
                            <div class="title"><strong>企业信息</strong></div>
                        </dd>
                        <dd>
                            <div class="title">
                                <span></span>企业名称：
                            </div>
                            <div class="text ng-binding"
                                 ng-bind="queryInfo.ENTERPRISE_NAME">{{\app\Helpers\sys('company_name')}}</div>
                        </dd>
                        <dd>
                            <div class="title">
                                <span></span>企业法人：
                            </div>
                            <div class="text ng-binding"
                                 ng-bind="queryInfo.ADDRESS">{{\app\Helpers\sys('company_people')}}</div>
                        </dd>

                        <dd>
                            <div class="title">
                                <span></span>联系电话：
                            </div>
                            <div class="text ng-binding"
                                 ng-bind="queryInfo.ADDRESS">{{\app\Helpers\sys('company_contact_number')}}</div>
                        </dd>

                        <dd>
                            <div class="title">
                                <span></span>联系地址：
                            </div>
                            <div class="text ng-binding"
                                 ng-bind="queryInfo.ADDRESS">{{\app\Helpers\sys('company_address')}}</div>
                        </dd>

                        {{--                        <dd>--}}
                        {{--                            <div class="title">--}}
                        {{--                                <span></span>邮政编码：--}}
                        {{--                            </div>--}}
                        {{--                            <div class="text ng-binding"--}}
                        {{--                                 ng-bind="queryInfo.ADDRESS">{{\app\Helpers\sys('ems_code')}}</div>--}}
                        {{--                        </dd>--}}

                        {{--                        <dd>--}}
                        {{--                            <div class="title">--}}
                        {{--                                <span></span>电子邮箱：--}}
                        {{--                            </div>--}}
                        {{--
                             <div class="text ng-binding" ng-bind="queryInfo.ADDRESS">{{\app\Helpers\sys('email')}}</div>--}}
                        {{--                        </dd>--}}

                        {{--                        <dd>--}}
                        {{--                            <div class="title">--}}
                        {{--                                <span class="gui-icon icon-ztdz"></span>企业网址：--}}
                        {{--                            </div>--}}
                        {{--                            <div class="text ng-binding"--}}
                        {{--                                 ng-bind="queryInfo.ADDRESS">{{\app\Helpers\sys('company_webset')}}</div>--}}
                        {{--                        </dd>--}}
                        {{--                        <dd>--}}
                        {{--                            <div class="title">--}}
                        {{--                                <span class="gui-icon icon-ztsfm"></span>主体身份码：--}}
                        {{--                            </div>--}}
                        {{--                            <div class="text ng-binding"--}}
                        {{--                                 ng-bind="queryInfo.USER_IDCODE">{{\app\Helpers\sys('subject_code')}}</div>--}}
                        {{--                        </dd>--}}
                        {{--                        <dd>--}}
                        {{--                            <div class="title">--}}
                        {{--                                <span></span>企业网址：--}}
                        {{--                            </div>--}}
                        {{--                            <div class="text ng-binding"--}}
                        {{--                                 ng-bind="queryInfo.ADDRESS">{{\app\Helpers\sys('company_webset')}}</div>--}}
                        {{--                        </dd>--}}

                        <dd>
                            <div class="title">
                                <span></span>企业介绍：
                            </div>
                            <div class="text ng-binding"
                                 ng-bind="queryInfo.ADDRESS">{{\app\Helpers\sys('company_detail')}}</div>
                        </dd>

                    </div>
                    <div id="tab2" class="weui_tab_bd_item">
                        <dd>
                            <div class="title">
                                <span></span>质检结果：
                            </div>
                            <div class="text" id="image" v-for="image in batch.quality_image">
                                <img :src="image.url" :alt="image.file" style='width: 80%;'
                                     @click="show_media(1, image.url)">
                            </div>
                        </dd>

                    </div>
                    <div id="tab3" class="weui_tab_bd_item">
                        <dd>
                            <div class="title">
                                <span class="gui-icon icon-ztmc"></span>基地名：
                            </div>
                            <div class="text ng-binding" ng-bind="queryInfo.ENTERPRISE_NAME">@{{ batch.base.name}}</div>
                        </dd>
                        <dd>
                            <div class="title">
                                <span class="gui-icon icon-ztdz"></span>基地地址：
                            </div>
                            <div class="text ng-binding" ng-bind="queryInfo.ADDRESS">@{{ batch.base.address_text}}@{{
                                batch.base.address}}
                            </div>
                        </dd>
                        <dd>
                            <div class="title">
                                <span class="gui-icon icon-frxm"></span>联系人：
                            </div>
                            <div class="text ng-binding" ng-bind="queryInfo.NAME">@{{ batch.base.master_name}}</div>
                        </dd>
                        <dd>
                            <div class="title">
                                <span class="gui-icon icon-lxfs"></span>联系方式：
                            </div>
                            <div class="text ng-binding" ng-bind="queryInfo.PHONE">@{{ batch.base.phone}}</div>
                        </dd>

                        <dd>
                            <div id="allmap"
                                 style="width: 100%;height: 400px;"></div>
                        </dd>

                    </div>
                </div>
            </div>

            <dd style="text-align: center">
                <p class="tips">生产经营主体对追溯信息真实性负责</p>
            </dd>
        </dl>
    </div>
    <div class="alert" id="alert" style="display: none;z-index: 20;">
        <div class="ngdialog-overlay"></div>
        <div class="gui-popup">
            <div class="popup-header">
                <h2 id="ngdialog1-aria-labelledby">查看</h2>
            </div>

            <div class="gui-section section-table" style="margin: 8px;">
                <ul class="gui-list list-media clearfix">
                    <li class="gui-col-1 ng-scope" id="imgbox" style="display: none;">
                        <div class="clearfix">
                            <img class="float-left ng-scope" style="width:100%" :src="now_media">
                        </div>
                        <p class="desc" id="ngdialog1-aria-describedby"><span class="text ng-binding">图片</span></p>
                    </li>
                    <li class="gui-col-1 ng-scope" id="videobox" style="display: none;">
                        <div class="clearfix">
                            <video class="float-left ng-scope" style="width:100%;max-height: 300px;" :src="now_media"
                                   controls="controls">
                                你的浏览器不支持视频
                            </video>
                        </div>
                        <p class="desc" id="ngdialog1-aria-describedby"><span class="text ng-binding">视频</span></p>
                    </li>
                    <div class="jubao" id='jubao' style="display: none;">
                        <div>
                            <span>姓名:</span>
                            <input type="text" placeholder="请输入姓名" v-model='name'>
                        </div>
                        <div>
                            <span>手机号:</span>
                            <input type="text" placeholder="请输入手机号" v-model='phone'>
                        </div>
                        <div>
                            <span>举报理由:</span>
                            <input type="text" placeholder="请输入理由" v-model='reason'>
                        </div>
                    </div>
                    <div class="jubao" id='error' style="display: none;min-width: 80%;">
                        <div>
                            <span style='width: 80%;'>@{{ error_tip }}</span>
                        </div>
                    </div>
                </ul>
            </div>
            <div class="popup-footer">
                <button type="button" class="gui-btn btn-mid" onclick="showAlert(false)">关闭</button>
                <button id='footerbtns' type="button" class="gui-btn btn-mid" style="margin-left: 20px;display: none;"
                        @click="report()">发送
                </button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="{{ asset('statics/js/home/vue.min.js')}}"></script>
<script src="{{ asset('statics/js/home/jquery.min.js')}}"></script>
<script src="{{ asset('statics/js/home/layer/layer.js')}}"></script>
<script src="{{ asset('statics/js/home/jquery-weui.min.js')}}"></script>
{{--<script src="https://webapi.amap.com/maps?v=1.4.15&key=e39156d9ba61ac13921e24fb036ae69c"></script>--}}
{{--<script src="https://api.map.baidu.com/api?v=2.0&ak=GP0T6CBjquSpz4pUgK8KFzyb"></script>--}}
<script type="text/javascript">
    {{--     let lat ="{{$base}}" Json.--}}
    function onApiLoaded(lng, lat) {
        lat = "{{$latitude}}";
        lng = "{{$longitude}}";
        var map = new AMap.Map('allmap', {
            center: [lng, lat],
            zoom: 16,
            // viewMode: '3D',
            // pitch: 55,
            // rotation: 35,
        });

        var marker = new AMap.Marker({
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [lng, lat]
        });

        var satelliteLayer = new AMap.TileLayer.Satellite();

        map.add(marker, satelliteLayer)
        // map.plugin(["AMap.ToolBar"], function() {
        //     map.addControl(new AMap.ToolBar());
        // });
    }

    var url = 'https://webapi.amap.com/maps?v=1.4.15&key=e39156d9ba61ac13921e24fb036ae69c&callback=onApiLoaded';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);

    function showImage(url) {
        layer.open({
            type: 1,
            content: "<img style='max-width: 100%;' src='" + url + "'>" //这里content是一个普通的String
        });
    }

    function showAlert(type, show) {
        // 弹窗
        var alert = document.getElementById("alert");
        // 图片卡片
        var img = document.getElementById("imgbox");
        // 视频卡片
        var video = document.getElementById("videobox");
        // 举报发送按钮
        var footerbtns = document.getElementById("footerbtns");
        // 弹窗标题
        var labelledby = document.getElementById("ngdialog1-aria-labelledby");
        // 举报文本框
        var jubao = document.getElementById("jubao");
        // 错误弹窗
        var tip = document.getElementById("error");
        // 如果关闭 清楚弹窗内容
        if (!type) {
            alert.style.display = 'none';
            img.style.display = 'none';
            video.style.display = 'none';
            footerbtns.style.display = 'none';
            jubao.style.display = 'none';
            error.style.display = 'none';
            return;
        }
        // 是不是举报
        if (type != 3) {
            labelledby.innerHTML = '查看';
        } else {
            footerbtns.style.display = 'inline-block';
            labelledby.innerHTML = '举报';
        }
        if (type == 1) {
            img.style.display = 'inline-block';
        }
        if (type == 2) {
            video.style.display = 'inline-block';
        }
        if (type == 3) {
            jubao.style.display = 'inline-block';
        }
        if (type == 4) {
            labelledby.innerHTML = '提示';
            footerbtns.style.display = 'inline-block';
            footerbtns.style.display = 'none';
            tip.style.display = 'inline-block';
        }
        alert.style.display = 'inline-block';
    }

    let vm = new Vue({
        el: "#kecha",
        filters: {},
        components: {},
        data() {
            return {
                batch: {
                    product: {
                        product_name: ''
                    }, base: {
                        name: '',
                        address_text: '',
                        master_name: '',
                        phone: '',
                    }
                },
                now_media: "",
                name: "",
                phone: "",
                reason: "",
                source_code: "",
                error_tip: "",
                scan_times: 0,
                customer: {},

            };
        },
        created() {
            this.content()
        },
        methods: {
            content() {
                let _that = this

                $.ajax({
                    method: 'get',
                    url: '/api/scan_result',
                    data: {
                        source_code: "{{$source_code}}"
                    },
                    success: function (data) {
                        if (data.code !== 0) {
                            _that.error_tip = data.msg
                            showAlert(4, true)
                        } else {
                            _that.batch = data.data.productBatch
                            _that.scan_times = data.data.scan_times
                            _that.source_code = data.data.source_code
                            _that.customer = data.data.customer
                            console.log(data.data)
                        }
                    }
                });
            },
            show_media(type, url) {
                console.log(url)
                if (type != 3) {//展示图片
                    this.now_media = url
                }
                //showAlert(type, true)
                showImage(url)
            },
            report() {
                let _that = this
                if (this.phone == '' || this.reason == '') {
                    alert('请填写完整信息')
                    return
                }
                $.ajax({
                    method: 'post',
                    url: '/api/report',
                    data: {
                        name: this.name,
                        phone: this.phone,
                        reason: this.reason,
                        batch_id: this.batch.batch_id,
                        source_code: this.source_code,
                    },
                    success: function (data) {
                        console.log(data)
                        if (data.code !== 0) {
                            alert(data.msg)
                            return
                        }
                        showAlert(false)
                        _that.error_tip = '举报成功'
                        showAlert(4, true)
                    }
                });
            },
        }
    });
</script>
</html>
